import React from 'react'
import { Menu, Dropdown } from 'antd';
import { UserOutlined, LoginOutlined } from '@ant-design/icons';
import {connect} from 'react-redux'
import {loginFail} from '../../action/index'

function DropMenu(props) {
  let handleMenuClick = ({ key })=>{
    if (key == 2) { //退出登录
      props.loginFail()   //触发登录失败的dispatch
    }
  }

  const menu = (
    <Menu onClick={handleMenuClick}>
      <Menu.Item key="1" icon={<UserOutlined />}>
        个人设置
    </Menu.Item>
      <Menu.Item key="2" icon={<LoginOutlined />}>
        退出登录
    </Menu.Item>
    </Menu>
  );
  return (
    <Dropdown.Button overlay={menu}>
      {props.userReducer.userInfo.username}
    </Dropdown.Button>
  )
}
const mapStateToProps = (state)=>{
  return state
}
export default connect(mapStateToProps, { loginFail })(DropMenu)
